<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="_csrf" th:content="${_csrf.token}" />
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
<link rel="stylesheet"
	th:href="@{/static/bootstrap/css/bootstrap.min.css}" />
<link th:href="@{/static/css/blog.css}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
	  <script th:src="@{/static/js/html5shiv.min.js}"></script>
	  <script th:src="@{/static/js/respond.min.js}"></script>
	<![endif]-->
<style>
body {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #eee;
}

.form-signin {
	max-width: 330px;
	padding: 15px;
	margin: 0 auto;
}

.form-signin .form-signin-heading, .form-signin .checkbox {
	margin-bottom: 10px;
}

.form-signin .checkbox {
	font-weight: normal;
}

.form-signin .form-control {
	position: relative;
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
	font-size: 16px;
}

.form-signin .form-control:focus {
	z-index: 2;
}

.form-signin input[type="email"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
</style>
<title>登录页还原</title>
</head>

<body>

	<div class="container">

		<form class="form-signin">
			<h2 class="form-signin-heading">登录页还原</h2>
			<label class="sr-only">动态口令</label> <input type="text" id="otp"
				class="form-control" required autofocus>
			<button class="btn btn-lg btn-primary btn-block" type="button"
				style="margin-top: 10px" id="restore-btn">还原</button>
		</form>

	</div>

	<div th:replace="base/foot_source">&nbsp;</div>

	<div class="modal " tabindex="-1" role="dialog" id="validateCodeModal"
		data-backdrop>
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">请输入验证码</h4>
				</div>
				<div class="modal-body">
					<form>
						<div id="validate-error" class="alert alert-danger"
							style="display: none"></div>
						<div class="form-group">
							<img th:src="@{/captcha}" class="img-responsive" id="validateImg" />
							<input type="text" class="form-control" id="validate"
								aria-describedby="basic-addon3">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" id="validate-btn">确定</button>
				</div>
			</div>
		</div>
	</div>
	<script>
		var validateModalOpen = false;
		function restore() {
			$.post(basePath + '/login/restore', {
				"code" : $("#otp").val(),
				"validateCode" : $("#validate").val()
			}, function(data) {
				if (data.success) {
					bootbox.alert("还原成功");
					setTimeout(function() {
						window.location.href = rootPath + '/login';
					}, 500)
				} else {
					if (data.code == 'validateCode.error') {
						if (validateModalOpen) {
							$("#validateImg").attr('src',
									basePath + '/captcha?time=' + $.now());
							$("#validate-error").html('验证码错误').show();
						} else {
							$("#validateCodeModal").modal('show');
						}
					} else {
						bootbox.alert(data.message);
						if (validateModalOpen) {
							$("#validateCodeModal").modal('hide');
						}
					}
				}
			});
		}
		$(function() {
			$("#restore-btn").click(function() {
				restore();
			});
			$("#validateCodeModal").on(
					'show.bs.modal',
					function() {
						validateModalOpen = true;
						$("#validateImg").attr('src',
								basePath + '/captcha?time=' + $.now());
					});
			$("#validateCodeModal").on('hidden.bs.modal', function() {
				validateModalOpen = false;
				$("#validate-error").hide();
			});
			$("#validate-btn").click(function() {
				restore();
			})
		});
	</script>
</body>
</html>
